<template>
  <cloudPage>
    <cloudHeader slot="gHeader" background="rgba(0,0,0,0)">
      <view class="grace-header-body">
        <!-- 返回按钮 -->
        <view
          class="grace-header-icons grace-icons icon-arrow-left"
          style="color: #000"
          @tap.stop="handleNavBack"
        ></view>
        <!-- 中间内容 -->
        <view
          class="grace-header-content-noflex grace-text-center font-32"
          style="color: #000"
        >找回密码</view>
        <!-- 右侧按钮 -->
        <view class="icons" style="font-size: 38rpx"> </view>
      </view>
    </cloudHeader>
    <view class="container">
      <view class="login">
        <text class="login-title">找回密码</text>
        <text class="login-welcome">欢迎来到蜗牛算力~</text>
      </view>

      <view class="forget_box">
        <!-- 手机号 -->
        <view class="login-form" v-if="category == 'mobile'">
          <input
            type="number"
            class="input_number flex1"
            :placeholder="$t('mf.auth.input_mobile')"
            placeholder-style="color: #BEBEBE;"
            v-model="codeNumber"
          />
        </view>
        <!-- 验证码 -->
        <view class="login-form" style="position: relative;">
          <input
            type="number"
            class="input_number flex1"
            :placeholder="$t('mf.auth.input_code')"
            placeholder-style="color: #BEBEBE;"
            v-model="forget_form.code"
          />
          <view style="
          text-align: right;
          position: absolute;
          right: 0;
          top: 0;
          ">
          <cloudSendCode
            style="flex-shrink: 0"
            v-model="codeNumber"
            type="password_reset"
            :category="category"
          >
          </cloudSendCode>
          </view>
        </view>
        <!-- 密码 -->
        <view class="login-form">
          <input
            type="password"
            class="input_number flex1"
            :placeholder="$t('account.forget.placeholder.password')"
            placeholder-style="color: #BEBEBE;"
            v-model="forget_form.password"
          />
        </view>
        <!-- 确认密码 -->
        <view class="login-form">
          <input
            type="password"
            class="input_number flex1"
            :placeholder="$t('account.forget.placeholder.confim')"
            placeholder-style="color: #BEBEBE;"
            v-model="forget_form.config_password"
          />
        </view>

        <button class="login-btn" @tap.stop="forgetNow">
          {{ $t("common.operate.sure") }}
        </button>
      </view>
    </view>
  </cloudPage>
</template>

<script>
import { mapActions } from "vuex";
const graceChecker = require("@/graceUI/jsTools/graceChecker.js");
export default {
  data() {
    return {
      forget_form: {
        password: null,
        config_password: null,
        code: null,
      },
      category: "mobile",
      codeNumber: null,
      hide1: false,
    };
  },

  methods: {
    ...mapActions("user", ["resetPassword", "resetPasswordByEmail"]),
    switchType() {
      if (this.category == "mobile") {
        this.category = "email";
      } else {
        this.category = "mobile";
      }
      this.codeNumber = null;
    },
    async forgetNow() {
      var rule = [
        {
          name: "password",
          checkType: "string",
          checkRule: "8,",
          errorMsg: this.$t("account.tips.password_length", { length: 8 }),
        },
        {
          name: "config_password",
          checkType: "samewith",
          checkRule: "password",
          errorMsg: this.$t("account.tips.password_not_same"),
        },
        {
          name: "code",
          checkType: "string",
          checkRule: "4,6",
          errorMsg: this.$t("account.tips.captcha_length"),
        },
      ];
      var checkRes = graceChecker.check(this.forget_form, rule);
      this.forget_form.mobile = this.codeNumber;
      this.forget_form.email = this.codeNumber;
      // 验证通过
      if (checkRes) {
        if (this.category == "mobile")
          await this.resetPassword(this.forget_form);
        else await this.resetPasswordByEmail(formData);
        this.makeToast(this.$t("account.tips.forget_success"));
        setTimeout(() => {
          this.handleNavLogin();
        }, 1500);
      } else {
        this.makeToast({ title: graceChecker.error, icon: "none" });
      }
    },
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  /* padding-top: 480rpx; */
}
.login_logo {
  width: 188rpx;
  height: 226rpx;
  position: relative;
  top: 27rpx;
  left: 50%;
  transform: translateX(-50%);
}
.forget_box {
  width: 100%;
  position: absolute;
  top: 350rpx;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 60rpx 60rpx 0px 0px;
  padding: 60rpx;
  box-sizing: border-box;
}
.forget_title {
  height: 65rpx;
  font-size: 46rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #fff;
  margin-bottom: 60rpx;
}
.input_box {
  width: 100%;
  height: 96rpx;
  background: linear-gradient(270deg, #1b1b2b 0%, #232534 100%);
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.5);
  border-radius: 24rpx;
  margin-bottom: 39rpx;
  align-items: center;
  padding: 0 50rpx;
  box-sizing: border-box;
}
.input_box image {
  height: 48rpx;
  width: 32rpx;
  margin-right: 20rpx;
}
.switch_text {
  height: 45rpx;
  font-size: 32rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #015fff;
  line-height: 45rpx;
  text-align: right;
  margin-bottom: 65rpx;
  margin-bottom: 85rpx;
}
.forget_btn {
  text-align: center;
  line-height: 100rpx;
  width: 100%;
  height: 100rpx;
  background-image: url("/static/auth/login/btn_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 55rpx;
  font-size: 34rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #2b2c3e;
  margin-bottom: 60rpx;
  margin-top: 80rpx;
}
.input_number {
  color: #fff;
}
.eye {
  width: 24rpx;
  height: 24rpx;
}

.reg{
  display: flex;
  justify-content: flex-end;
  margin-right: 24rpx;
  margin-top: 37rpx;
  color: #2A96EE;
  font-size: 34rpx;
}
.login{
  display: flex;
  flex-direction: column;
  margin-left: 54rpx;
  margin-top: 106rpx;
}
  .login-title{
			font-size: 48rpx;
		}
		.login-welcome{
			font-size: 28rpx;
			margin-top: 30rpx;
		}
		.login-form{
			margin-top: 30rpx;
      padding-bottom:30rpx;
      border-bottom:1px solid #e1e1e1;
		}
		.login-forgetPwd{
			display: flex;
			justify-content: flex-end;
			font-size: 24rpx;
			color: #2A96EE;
			margin-right: 52rpx;
			margin-top: 37rpx;
		}
		.login-btn{
			width: 642rpx;
			height: 88rpx;
			font-size: 32rpx;
			line-height: 88rpx;
			margin-top: 79rpx;
			margin-left: 0;
			border-radius: 12rpx;
      background-color: #2A96EE;
      color: #fff;
		}

    .grace-button {
      font-size: 12rpx !important;
      background-color: #2A96EE;
      width: 147rpx;
      height: 48rpx;
      border-radius: 50rpx;
      line-height: 48rpx;
      padding: 0;
      color: #1f2032;
    }
</style>
